<template>
	<view>
		<view class="hongBj top">
			<view class="yqm">我的邀请码:{{ code }} <text @tap="doCopy">复制</text></view>
			<view class="place" @tap="changes" ></view>
		</view>

		<view class="title">我的佣金</view>

		<view class="box">
			<view class="boxIn">
				<view class="boxIn-top">
					<view class="top-left">
						<view class="available">
							<text class="available-price">{{ info.money }}</text>
							<text class="available-title">当前可提佣金</text>
						</view>

						<view class="have-available">
							<text class="have-available-price">{{ info.extract }}</text>
							<text class="have-available-title">已提取佣金</text>
						</view>

					</view>
					<view class="top-right">
						<view class="total">
							<text class="total-price">{{ info.total }}</text>
							<text class="total-title">累计佣金</text>
						</view>

						<view class="member">
							<text class="member-num">{{ info.count }}</text>
							<text class="member-title">邀请会员</text>
						</view>
					</view>
				</view>

				<view class="btn" @tap="change">我要提现</view>

			</view>

		</view>

		<!-- 覆盖层 -->
		<view :class="[serviseShow?'maskActive':'maskActiver']" class="mask" v-if="maskShow" @tap="close">

			<view class="servise" @tap.stop>
				<view class="se-title">请输入提现金额</view>
				<view class="se-subtitle">满200可提。线下转账</view>
				<input type="number" maxlength="5" :placeholder="placeholder" @confirm="confirm" @blur="blur">
				<view class="btn-box">
					<view class="btn-item" style="color: #000000;font-size: 36rpx;border-right: 1rpx solid #DDDDDD;" @tap="close">关闭</view>
					<view class="btn-item" style="color: #0091FF;font-size: 36rpx;" @tap="drawal">提现</view>
				</view>

			</view>


		</view>
		
		<view :class="[serviseShows?'maskActive':'maskActiver']" class="masks" v-if="maskShows" @tap="closes">
		
			<view class="servise" @tap.stop>
				<button open-type="share" class="share-btn">
					<view class="btn-img">
						<image src="/static/images/my/for-friend.png" mode=""></image>
					</view>
					<text>发送给好友</text>
				</button>
		
		
				<view class="item" @tap="shareFc">
					<view class="img">
						<image src="/static/images/my/pic.png" mode=""></image>
					</view>
					<text>生成分享图片</text>
				</view>
		
			</view>
		
		
		</view>
		

		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @click="hideQrShow()">
			<view class="flex_column">
				<view class="">
					<image :src="poster.finalPath || ''" mode="scaleToFill" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh saveImgDiv">
					<button type="primary" size="mini" @click.prevent.stop="saveImage()">保存至相册</button>
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="myCanvas" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import _app from '@/components/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/components/QS-SharePoster/QS-SharePoster.js';
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				code: '',
				info: {},
				serviseShow: false,
				serviseShows: false,
				maskShow: false,
				maskShows: false,
				placeholder: '',
				upMoney: '',
				//生成图片
				poster: {
					finalPath: ""
				},
				canvasId: 'myCanvas',
				qrShow: false,
			};
		},
		onLoad() {

			//获取数据
			this.getData();

		},
		methods: {
			//生成海报
			async shareFc() {
				try {
					console.log('准备生成:' + new Date())
					// let coupon_list1 = [],coupon_listString="";

					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据

						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						backgroundImage: 'https://friend.tanshishang.cn/assets/img/haibao.png',
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											// Context.setFillStyle('black');
											// Context.setGlobalAlpha(0.3);
											// Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
											// Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'text',
										text: "我的邀请码",
										size: 24,
										color: '#757575',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										dx: bgObj.width * 0.5,
										dy: bgObj.height * 0.28,
										serialNum: 0,
									},
									{
										type: 'text',
										text: this.code,
										size: 80,
										color: '#8D31FF',
										textAlign: 'center',
										textBaseline: 'middle',
										fontWeight: 'bold',
										dx: bgObj.width * 0.5,
										dy: bgObj.height * 0.4,
										serialNum: 0,
									},
									{
										type: 'image',
										// url: this.$config.API + '/api/user/getCode?token=' + this.token + '&code=' + this.code,
										//二维码地址
										url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F37%2F19%2F58573c403bcf4bf.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613230034&t=b23566427a351d81bc0f7aad4475e822",
										alpha: 1,
										dx: bgObj.width * 0.3,
										dy: bgObj.height * 0.53,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.42 / imageInfo.width;
											return {
												dWidth: imageInfo.width * scale,
												dHeight: imageInfo.height * scale,
											}
										}
									},
									{
										type: 'text',
										text: "扫码注册成为无锡青年交友会员",
										size: 20,
										color: '#595857',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										dx: bgObj.width * 0.5,
										dy: bgObj.height * 0.88,
										serialNum: 0,
									},
									{
										type: 'text',
										text: "享受众多会员权益",
										size: 18,
										color: '#8D31FF',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										dx: bgObj.width * 0.5,
										dy: bgObj.height * 0.92,
										serialNum: 0,
									},
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					console.log(this.poster);
					this.qrShow = true;
				} catch (e) {
					console.log(e);
				}
			},
			//关闭
			hideQrShow() {
				this.qrShow = false;
			},
			//保存图片
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						uni.showToast({
							title: '保存成功'
						});
					}
				})
			},
			//点击键盘完成时
			confirm(e) {
				console.log(e.detail.value)
				this.upMoney = e.detail.value;
			},
			//键盘失去焦点时
			blur(e) {
				console.log(e.detail.value);
				this.upMoney = e.detail.value;
			},
			//提现判断
			drawal() {
				if (!this.upMoney) {
					uni.showModal({
						title: '提示',
						content: '请先输入提现金额!',
						showCancel: false,
						confirmText: '知道了',
						success: (res) => {
							console.log(res);
						}
					});
					return false;
				}

				if (this.upMoney > this.info.money) {
					uni.showModal({
						title: '提示',
						content: '当前可提金额不足,请重新输入!',
						showCancel: false,
						confirmText: '知道了',
						success: (res) => {
							console.log(res);
						}
					});
				} else {
					this.close();
					uni.showLoading({
						title: '正在提交...'
					});
					setTimeout(() => {
						uni.hideLoading();
						this.doDrawal();
					}, 800)
				}
			},
			//提现
			async doDrawal() {
				try {
					let params = {
						token: this.token,
						money: this.upMoney
					};
					let res = await this.$request.request.get('/api/user/commission', params)
					console.log(res);
					if (res.code == 200) {
						uni.showModal({
							title: '温馨提示',
							content: '您的提现申请已提交，工作人员将在3个工作日内处理您的请求。',
							showCancel: false,
							confirmText: '知道了',
							success: (res) => {
								console.log(res);
							}
						});
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//复制邀请码
			doCopy() {
				uni.setClipboardData({
					data: this.code,
					success: function() {
						console.log('success');
					}
				});
			},
			//获取数据
			async getData() {
				this.info = {};
				this.code = 777777;
				this.placeholder = '当前可提111元';
				return
				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.get('/api/user/code', params)
					console.log(res);
					if (res.code == 200) {
						this.info = res.data.data;
						this.code = res.data.code;
						this.placeholder = '当前可提' + this.info.money + '元';
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//切换蒙层
			change() {
				this.serviseShow = true;
				this.maskShow = true;
			},
			changes(){
				this.serviseShows = true;
				this.maskShows = true;
			},
			//直接关闭了蒙层
			close() {
				this.serviseShow = false;
				setTimeout(() => {
					this.maskShow = false;
				}, 450)
			},
			closes(){
				this.serviseShows = false;
				setTimeout(() => {
					this.maskShows = false;
				}, 450)
			},
			onShareAppMessage(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					title: '青春派青年交友',
					imageUrl:'https://friend.tanshishang.cn/assets/img/logo1.png',
					path: '/pages/index/index'
				}
			},
		}
	}
</script>

<style lang="scss">
	@import'matchmaker.scss'
</style>
